<template>
	<section class="vbox">
		<section class="scrollable">
			<div id="masonry" class="pos-rlt animated fadeInUpBig">
				<div class="grid-item item grid-item--width2 grid-item--height2">
					<div class="carousel slide auto" data-interval="3000">
						<div class="carousel-inner">
							<div class="item active">
								<div class="item-overlay opacity animated fadeInDown wrapper bg-info">
									<p class="text-white">N.01</p>
									<div class="center text-center m-t-n">
										<a href="#"><i class="icon-control-play i-2x"></i></a>
									</div>
								</div>
								<div class="bottom wrapper bg-info gd">
									<div class="m-t m-b"><a href="#" class="b-b b-danger h2 text-u-c text-lt font-bold">Teideal</a></div>
									<p class="hidden-xs">Morbi nec nunc condimentum, egestas dui nec, fermentum diam. Vivamus vel tincidunt
										libero, vitae elementum ligula</p>
								</div>
								<a href="#"><img src="/static/images/m20.jpg" alt="" class="img-full"></a>
							</div>
							<div class="item">
								<div class="item-overlay opacity animated fadeInDown wrapper bg-info">
									<p class="text-white">N.02</p>
									<div class="center text-center m-t-n">
										<a href="#"><i class="icon-control-play i-2x"></i></a>
									</div>
								</div>
								<div class="bottom wrapper bg-info gd">
									<div class="m-t m-b"><a href="#" class="b-b b-warning h2 text-u-c text-lt font-bold">Tincidunt</a></div>
									<p class="hidden-xs">Gestas dui nec, fermentum diam. Vivamus vel tincidunt libero, vitae ligula elementum</p>
								</div>
								<a href="#"><img src="/static/images/m22.jpg" alt="" class="img-full"></a>
							</div>
						</div>
					</div>
				</div>
				<div class="item grid-item grid-item--height2">
					<div class="item-overlay gd animated fadeInUp wrapper bg-info">
						<p class="text-white">Watch later</p>
						<div class="center text-center m-t-n">
							<a href="#"><i class="icon-control-play i-2x"></i></a>
						</div>
					</div>
					<div class="bottom gd bg-info wrapper">
						<div class="m-t m-b"><a href="#" class="b-b b-info h4 text-u-c text-lt font-bold">Tincidunt</a></div>
						<p class="hidden-xs">Vivamus vel tincidunt libero, lementum ligula vitae</p>
					</div>
					<a href="#"><img src="/static/images/m31.jpg" alt="" class="img-full"></a>
				</div>
				<div class="grid-item item">
					<div class="bottom gd bg-info wrapper">
						<div class="m-t m-b"><a href="#" class="b-b b-warning h4 text-u-c text-lt font-bold">Duis</a></div>
						<p class="hidden-xs">Tincidunt libero vitae elementum</p>
					</div>
					<a href="#"><img src="/static/images/m10.jpg" alt="" class="img-full"></a>
				</div>
				<div class="grid-item item">
					<div class="item-overlay active bg-primary dker wrapper text-center">
						<div class="m-t m-b"><a href="#" class="b-b b-white h4 text-u-c text-lt font-bold">lementum</a></div>
						<p class="hidden-xs">lementum ligula vitae est quis congue ero</p>
					</div>
				</div>
				<div class="grid-item item">
					<div class="bottom gd bg-info wrapper">
						<div class="m-t m-b"><a href="#" class="b-b b-info h4 text-u-c text-lt font-bold">Diam</a></div>
						<p class="hidden-xs">Con malesuada est, quis congue nibhs</p>
					</div>
					<a href="#"><img src="/static/images/m4.jpg" alt="" class="img-full"></a>
				</div>
				<div class="grid-item item">
					<div class="carousel carousel-fade bg-info slide auto" data-interval="6000">
						<div class="carousel-inner">
							<div class="item active">
								<div class="item-overlay active dker wrapper text-center">
									<div class="m-t m-b"><a href="#" class="b-b b-info h4 text-u-c text-lt font-bold">Cosies</a></div>
									<p class="hidden-xs">Duis non malesuada est, quis congue nibh</p>
								</div>
								<a href="#"><img src="/static/images/m4.jpg" alt="" class="img-full"></a>
							</div>
							<div class="item">
								<div class="item-overlay active dk wrapper text-center">
									<div class="m-t m-b"><a href="#" class="b-b b-info h4 text-u-c text-lt font-bold">Malesuada</a></div>
									<p class="hidden-xs">Aliquam sollicitudin venenatis congue nibh</p>
								</div>
								<a href="#"><img src="/static/images/m4.jpg" alt="" class="img-full"></a>
							</div>
						</div>
					</div>
				</div>
				<div class="grid-item item">
					<div class="bottom gd bg-info wrapper">
						<div class="m-t m-b"><a href="#" class="b-b b-info h4 text-u-c text-lt font-bold">Vivamus</a></div>
						<p class="hidden-xs">Morbi id neque quam. Aliquam sollicitudin venenatis ipsum</p>
					</div>
					<a href="#"><img src="/static/images/m13.jpg" alt="" class="img-full"></a>
				</div>
				<div class="item grid-item grid-item--height2">
					<div class="bottom gd bg-info wrapper">
						<div class="m-t m-b"><a href="#" class="b-b b-warning h4 text-u-c text-lt font-bold">Libero</a></div>
						<p class="hidden-xs">Aliquam sollicitudin venenatis ipsum</p>
					</div>
					<a href="#"><img src="/static/images/m30.jpg" alt="" class="img-full"></a>
				</div>
				<div class="grid-item item">
					<div class="bottom gd bg-info wrapper">
						<div class="m-t m-b"><a href="#" class="b-b b-info h4 text-u-c text-lt font-bold">habitant</a></div>
						<p class="hidden-xs">Vel tincidunt libero, vitae ligula tristique</p>
					</div>
					<a href="#"><img src="/static/images/m19.jpg" alt="" class="img-full"></a>
				</div>
				<div class="grid-item item">
					<div class="item-overlay active bg-success dker wrapper text-center">
						<div class="m-t m-b"><a href="#" class="b-b b-info h4 text-u-c text-lt font-bold">Ligula</a></div>
						<p class="hidden-xs">Sesuada est, quis congue tincidunt libero nibh ligula</p>
					</div>
				</div>
				<div class="grid-item item">
					<div class="bottom gd bg-info wrapper">
						<div class="m-t m-b"><a href="#" class="b-b b-info h4 text-u-c text-lt font-bold">Malesuada</a></div>
						<p class="hidden-xs">Pellentesque habitant morbi tristique sodales</p>
					</div>
					<a href="#"><img src="/static/images/m7.jpg" alt="" class="img-full"></a>
				</div>
				<div class="grid-item item">
					<div class="bottom gd bg-info wrapper">
						<div class="m-t m-b"><a href="#" class="b-b b-info h4 text-u-c text-lt font-bold">Donec</a></div>
						<p class="hidden-xs">Vestibulum ullamcorper</p>
					</div>
					<a href="#"><img src="/static/images/m18.jpg" alt="" class="img-full"></a>
				</div>
				<div class="item grid-item grid-item--height2">
					<div class="bottom gd bg-info wrapper">
						<div class="m-t m-b"><a href="#" class="b-b b-primary h4 text-u-c text-lt font-bold">Eleifend</a></div>
						<p class="hidden-xs">Malesuada augue. Donec eleifend condimentum</p>
					</div>
					<a href="#"><img src="/static/images/m32.jpg" alt="" class="img-full"></a>
				</div>
				<div class="item grid-item grid-item--width2">
					<div class="bottom gd bg-info wrapper">
						<div class="m-t m-b"><a href="#" class="b-b b-info h4 text-u-c text-lt font-bold">Sollicitudin </a></div>
						<p class="hidden-xs">Mauris convallis mauris at pellentesque volutpat</p>
					</div>
					<a href="#"><img src="/static/images/m40.jpg" alt="" class="img-full"></a>
				</div>
				<div class="grid-item item grid-item--width2 grid-item--height2">
					<div class="bottom gd bg-info wrapper">
						<div class="m-t m-b"><a href="#" class="b-b b-warning h2 text-u-c text-lt font-bold">Senectus </a></div>
						<p class="hidden-xs">Fermentum diam. Vivamus vel tincidunt libero, vitae elementum ligula</p>
					</div>
					<a href="#"><img src="/static/images/m21.jpg" alt="" class="img-full"></a>
				</div>
				<div class="grid-item item">
					<div class="bottom gd bg-info wrapper">
						<div class="m-t m-b"><a href="#" class="b-b b-info h4 text-u-c text-lt font-bold">Phasellus</a></div>
						<p class="hidden-xs">Senectus et netus et malesuada fames</p>
					</div>
					<a href="#"><img src="/static/images/m5.jpg" alt="" class="img-full"></a>
				</div>
				<div class="grid-item item">
					<div class="bottom gd bg-info wrapper">
						<div class="m-t m-b"><a href="#" class="b-b b-white h4 text-u-c text-lt font-bold">Neque</a></div>
						<p class="hidden-xs">Consectetur adipiscing elit. Morbi id neque quam</p>
					</div>
					<a href="#"><img src="/static/images/a10.png" alt="" class="img-full"></a>
				</div>
				<div class="grid-item item">
					<div class="bottom gd bg-info wrapper">
						<div class="m-t m-b"><a href="#" class="b-b b-info h4 text-u-c text-lt font-bold">Nisi ne</a></div>
						<p class="hidden-xs">Orbi tristique senectus et netus et malesuada</p>
					</div>
					<a href="#"><img src="/static/images/m4.jpg" alt="" class="img-full"></a>
				</div>
				<div class="grid-item item">
					<div class="item-overlay active bg-warning dker wrapper text-center">
						<div class="m-t m-b"><a href="#" class="b-b b-white h4 text-u-c text-lt font-bold">Morbi</a></div>
						<p class="hidden-xs">Dolor sit amet, consectetur adipiscing elit.</p>
					</div>
				</div>
				<div class="grid-item item">
					<div class="bottom gd bg-info wrapper">
						<div class="m-t m-b"><a href="#" class="b-b b-info h4 text-u-c text-lt font-bold">Congue</a></div>
						<p class="hidden-xs">Malesuada est, quis congue nibh</p>
					</div>
					<a href="#"><img src="/static/images/m6.jpg" alt="" class="img-full"></a>
				</div>
				<div class="grid-item item">
					<div class="item-overlay active bg-info lt wrapper text-center">
						<div class="m-t m-b"><a href="#" class="b-b b-white h4 text-u-c text-lt font-bold">Csesoi</a></div>
						<p class="hidden-xs">Dolor sit ectetur elit senectus et malesuada</p>
					</div>
				</div>
				<div class="item grid-item grid-item--width2">
					<div class="bottom gd bg-info wrapper">
						<div class="m-t m-b"><a href="#" class="b-b b-info h4 text-u-c text-lt font-bold">Consectetur</a></div>
						<p class="hidden-xs">Adipiscing elit senectus et netus mal.</p>
					</div>
					<a href="#"><img src="/static/images/m42.jpg" alt="" class="img-full"></a>
				</div>
				<div class="grid-item item">
					<div class="bottom gd bg-info wrapper">
						<div class="m-t m-b"><a href="#" class="b-b b-info h4 text-u-c text-lt font-bold">Morbi</a></div>
						<p class="hidden-xs">Dolor sit amet, consectetur adipiscing elit.</p>
					</div>
					<a href="#"><img src="/static/images/m9.jpg" alt="" class="img-full"></a>
				</div>
				<div class="grid-item item">
					<div class="bottom gd bg-info wrapper">
						<div class="m-t m-b"><a href="#" class="b-b b-info h4 text-u-c text-lt font-bold">Soesle</a></div>
						<p class="hidden-xs">Adipiscing elituis congue</p>
					</div>
					<a href="#"><img src="/static/images/a7.png" alt="" class="img-full"></a>
				</div>
				<div class="grid-item item">
					<div class="bottom gd bg-info wrapper">
						<div class="m-t m-b"><a href="#" class="b-b b-info h4 text-u-c text-lt font-bold">Congue</a></div>
						<p class="hidden-xs">Malesuada est, congue nibh quis elituis</p>
					</div>
					<a href="#"><img src="/static/images/m12.jpg" alt="" class="img-full"></a>
				</div>
			</div>
		</section>
	</section>
</template>
<script>
	import Masonry from 'masonry-layout'
	// import Tiles from '../../static/js/masonry/tiles.min.js'
	// import '../../static/js/masonry/demo.js'

	export default {
		mounted() {
			// var $grid = $('#masonry').masonry({
			// // options...
			// });
			// // layout Masonry after each image loads
			// $grid.imagesLoaded().progress(function() {
			// $grid.masonry('layout');
			// });

			var msnry = new Masonry('#masonry', {
			columnWidth: 225,
			itemSelector: '.grid-item'
			});
		}
	}
</script>

<style scoped>
	.grid-item {
		width: 225px;
		height: 225px;
	}

	.grid-item--width2 {
		width: 450px;
	}

	.grid-item--height2 {
		height: 450px;
	}
</style>
